<template>
    <div class="backIndexPage" ref="backIndexContainer">
        <div class="logo">
            <img src="../../images/logo.png" alt="">
        </div>
        <!-- 按钮 -->
        <div class="backIndex-content">
            <router-link class="login commonBox" to="/programList" > 
                <span>
                    标 准 运 动 任 务
                </span>
            </router-link>
            <router-link class="regis commonBox" to="/common" >
                <span>名 词 回 顾</span>
            </router-link>
        </div>

        <!-- 个人中心 -->
        <!-- <user-info></user-info> -->
    </div>
</template>

<script>
import UserInfo from './userInfo.vue'
export default {
    data(){
        return {
           clientHeight:"",
           showUserInfo:false
        }
    },
    mounted(){
        // 获取浏览器可视区域高度
        this.clientHeight =   `${document.documentElement.clientHeight}`          //document.body.clientWidth;
        window.onresize = function temp() {
            this.clientHeight = `${document.documentElement.clientHeight}`;
        };
    },
    methods:{
        changeFixed(clientHeight){                        //动态修改样式
            // this.$refs.backIndexContainer.style.height = (clientHeight-90)+'px';
        },
        showUserFun(){
            this.showUserInfo =!this.showUserInfo
        }
    },
    watch:{
        clientHeight: function () {
            this.changeFixed(this.clientHeight)
        },
    },
    components: {
      'user-info': UserInfo
    }
}
</script>

<style lang="scss" scoped>
.backIndexPage{
    position: relative;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    z-index: 99;
    overflow: hidden;
    .logo{
        width:30%;
        height: 26%;
        margin: auto;
        // margin-top: 12%;
        img{
            width:100%;
            height: 100%;
        }
    }
    .backIndex-content{
        width:60%;
        // height:20%;
        text-align: center;
        margin:100px auto;
        .login,.regis{
            display: block;
            margin:40px auto;
            color: #78383C;
            background: #fff;
            border:2px solid #78383C;
            transition: all  0.3s ease;
        }
        .login:hover,.regis:hover{
            color: #fff;
            background: #78383C;
        }
        
    }
}
</style>